<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" @click="save" size="mini">保存</el-button>
        <el-button type="primary" size="mini" @click="uploadAnnex">附件</el-button>
        <el-button @click="$emit('change','List')" size="mini">返回</el-button>
      </el-col>
    </el-row>
    <el-form ref="form" :rules="rules" :model="form" label-width="110px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="入库单号" prop="q">
            <el-input v-model="form.q" :readonly="isReadOnly" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="日期" prop="q">
            <el-date-picker
              :readonly="isReadOnly"
              style="width: 100%;"
              v-model="form.q"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="入库类别" prop="q">
            <el-select style="width: 100%;" v-model="form.w" :readonly="isReadOnly" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物料仓库" prop="q">
            <el-select style="width: 100%;" v-model="form.w" :readonly="isReadOnly" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="采购员" prop="q">
            <el-select style="width: 100%;" v-model="form.w" :readonly="isReadOnly" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="制单人" prop="q">
            <el-select style="width: 100%;" v-model="form.w" :readonly="isReadOnly" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发票号码" prop="q">
            <el-input v-model="form.q" :readonly="isReadOnly" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="供应商" prop="q">
            <el-input v-model="form.q" :readonly="isReadOnly" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="入库时间" prop="q">
            <el-date-picker
              :readonly="isReadOnly"
              style="width: 100%;"
              v-model="form.q"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button size="mini" @click="add">新增</el-button>     
        <el-button size="mini">删除</el-button>
        <el-button size="mini" @click="lead">导入</el-button>
      </el-col>
    </el-row>
    <el-table style="margin-top: 40px;" show-summary v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="物料名称" prop="roleName" />
      <el-table-column label="大类" prop="roleKey"  />
      <el-table-column label="物料类别" prop="roleSort" />
      <el-table-column label="规格型号" prop="roleSort" width="100" />
      <el-table-column label="数量" prop="roleSort" width="100" />
      <el-table-column label="无税单价" prop="roleSort" />
      <el-table-column label="无税金额" prop="roleSort" />
      <el-table-column label="生产厂家" prop="roleSort" width="100" />
      <el-table-column label="生产日期" prop="roleSort" width="100" />
      <el-table-column label="供货单位" prop="roleSort" />
      <el-table-column label="入库时间" prop="roleSort" />
      <el-table-column label="货架号" prop="roleSort" />
      <el-table-column label="备注" prop="roleSort" />
    </el-table>
    <!-- 新增对话框 -->
    <el-dialog title="物料代码引单" :visible.sync="materialOpen" width="800px" append-to-body>
      <el-form :model="materialForm" label-width="80px" :inline="true">
        <el-form-item label="物料名称">
          <el-select v-model="materialForm.q" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="大类">
          <el-select v-model="materialForm.q" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物料类别">
          <el-select v-model="materialForm.q" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="materialList" @selection-change="maintenanceChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="设备名称" prop="roleName" />
        <el-table-column label="检查项目" prop="roleKey"  />
        <el-table-column label="检查内容" prop="roleSort" />
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getmaterialList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="materialSubmit">确 定</el-button>
        <el-button @click="materialOpen=false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 新增对话框 -->
    <el-dialog title="物料入库明细导入" :visible.sync="leadOpen" width="800px" append-to-body>
      <el-form :model="leadForm" label-width="80px" :inline="true">
        <el-form-item label="导入文件" prop="file" :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
          <FileUpload v-model="leadForm.file" />
        </el-form-item>
      </el-form>
      <a href="" style="color: #3093ef;">点击下载模板</a>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="leadSubmit">确 定</el-button>
        <el-button @click="leadOpen=false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 附件对话框 -->
    <el-dialog title="附件上传" :visible.sync="annexOpen" width="500px" append-to-body>
      <imageUpload v-model="imageFile" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="annexSubmit">确 定</el-button>
        <el-button @click="annexOpen=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listRole } from "@/api/system/role";
export default {
  data() {
    return {
      ids: [],
      // 是否只读
      isReadOnly: false,
      // 下拉数据
      options: [],
      loading: false,
      // 表格数据
      list: [],
      title: '新增',
      rules: {
        q: [{ required: true, message: '请输入', trigger: 'blur' }],
        w: [{ required: true, message: '请选择', trigger: 'change' }],
        e: [{ required: true, message: '请输入', trigger: 'blur' }],
        r: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      form: {},
      // 物料新增字段
      materialList: [],
      materialOpen: false,
      materialForm: {},
      materialIds: [],
      total:0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 导入
      leadOpen: false,
      leadForm: { file: '' },
      // 附件上传
      annexOpen: false,
      imageFile: []
    }
  },
  methods: {
    // 表格选择
    handleSelectionChange() {

    },
    // 重置
    reset() {
      this.form = {
        q: '',
        w: '',
        e: '',
        r: ''
      }
      this.isReadOnly = false
    },
    // 打印
    handlePrint() {

    },
    // 物料新增
    add() {
      this.materialForm = {}
      this.getmaterialList()
      this.materialOpen = true
    },
    // 物料列表
    getmaterialList() {
      listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.materialList = response.rows;
          this.total = response.total;
        }
      );
    },
    // 物料选择
    maintenanceChange() {

    },
    handleQuery() {
      this.getmaterialList()
    },
    resetQuery() {
      this.materialForm = {}
      this.getmaterialList()
    },
    // 物料表单确定
    materialSubmit() {

    },
    // 导入确定
    leadSubmit() {

    },
    // 导入按钮
    lead() {
      this.leadOpen = true
    },
    // 附件上传
    uploadAnnex() {
      this.annexOpen = true
    },
    annexSubmit() {

    }
  }
}
</script>